<template>
  <div class="conversion" @click.stop="aotuTab=false">
    <div>
      <el-button type="primary" size="mini" @click="submit">{{ $t('btn.save') }}</el-button>
    </div>
    <el-tabs>
      <el-tab-pane :label="$t('market.info')">
        <el-form :model="operVal" size="mini" label-width="100px">
          <el-form-item :label="$t('shop.fnumber')">
            <el-input v-model="operVal.fnumber" />
          </el-form-item>
          <el-form-item :label="$t('shop.name1')" prop="fmodel">
            <el-input v-model="operVal.fname" />
          </el-form-item>
          <el-form-item :label="$t('market.descrip')" prop="fdescription">
            <el-input v-model="operVal.fdescription" />
          </el-form-item>
          <el-form-item :label="$t('market.group')" prop="funitgroupid">
            <el-select v-model="operVal.funitgroupid" @change="unitHeadel">
              <el-option
                v-for="item in materialGroupL"
                :key="item.funitgroupid"
                :label="item.fname"
                :value="item.funitgroupid"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('market.isbaseunit')" prop="fprecision">
            <el-checkbox v-model="operVal.fisbaseunit" />
          </el-form-item>
          <el-form-item :label="$t('market.precision')" prop="fprecision">
            <el-input-number v-model="operVal.fprecision" controls-position="right" style="width: 180px;" />
          </el-form-item>
          <el-form-item :label="$t('market.relation')">
            <!--            换算值 * 基准单位 = 分子 * 当前单位-->
            {{ $t('market.matrixing') }} * {{ $t('market.currentunit') }} = {{ $t('market.molecule') }} * {{ $t('market.destunit') }}
            <br>
            <el-input-number v-model="operVal.fconvertdenominator" class="num" />
            * <el-input v-model="operVal.fcurrentunit" disabled class="num" /> =
            <el-input-number v-model="operVal.fconvertnumerator" class="num" />
            * <el-input v-model="operVal.fdestunit" class="num" disabled />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { insretUnits, querybenchmarkUnit, queryUnitGroupList } from '@/api/basicManagement/measuring'
export default {
  data() {
    return {
      materialGroupL: [],
      operVal: {
        fisbaseunit: false,
        fdocumentstatus: 'A',
        fnumber: '',
        fdescription: '',
        fprecision: 0,
        fconvertdenominator: 1,
        fconvertnumerator: 1,
        fcurrentunit: '',
        fdestunit: this.$t('market.destunit')
      }
    }
  },
  created() {
    this.getMaterialGroupL() // 组别
  },
  methods: {
    submit() {
      insretUnits({ ...this.operVal }).then(res => {
        if (res.code === 0) {
          // 关闭当前页面
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$router.push({ path: `/editMeasuring/${res.data}` })
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 监听组别
    unitHeadel(ev) {
      querybenchmarkUnit({ funitgroupid: ev }).then(res => {
        if (res.code === 0) {
          this.operVal.fcurrentunit = res.data.fname
          this.operVal.fcurrentunitid = res.data.funitid
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 获取树型控件数据
    async getMaterialGroupL() {
      const { data: RES } = await queryUnitGroupList({})
      this.materialGroupL = RES.array
    }
  }
}
</script>

<style scoped lang="scss">
.conversion {
  @include listBom;
  background: #FFF;
  padding: 10px;
  .tabPosit {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: 3.5vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 99999!important;
  }
  .num {
    width: 80px!important;
  }
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    //max-width: 300px;
    .el-form-item {
      width: 500px;
    }
    &::v-deep .el-input-number .el-input__inner{
      padding: 0 5px;
      height: 30px;
      width: 75px;
    }
    &::v-deep .el-input-number .el-input{
      width: 100%;
    }
    &::v-deep .el-input-number--mini{
      width: 100%;
    }
    &::v-deep .el-input-number__increase{
      display: none;
    }
    &::v-deep .el-input-number__decrease{
      display: none;
    }
    &::v-deep .el-table__footer-wrapper tbody td{
      background: #fdf6ec!important;
    }
  }
}
</style>

